<template>
  <div>
    <nav
      class="fixed top-0 left-0 right-0 z-20"
      :class="{ opacity: nav.opacity, hid: nav.hidden }"
    >
      <div class="h-[52px] flex justify-between items-center px-4 md:px-8">
        <nuxt-link :to="localePath('/')">
          <h1 class="post-title font-bold text-md md:text-lg">
            LLLarry{{ $t('logo') }}
          </h1>
        </nuxt-link>
        <!-- 大屏导航栏 -->
        <div class="hidden md:flex">
          <div
            v-for="menu in pcMenus"
            :key="menu.title"
            class="group text-gray-800 ml-3 cursor-pointer post-item flex items-center"
            @click="menuClick(menu)"
          >
            <div
              class="flex items-center px-1 text-md relative after:absolute after:left-0 after:bottom-[-4px] after:h-[3px] after:w-full after:origin-left after:scale-x-0 group-hover:after:scale-x-100 after:duration-300 after:bg-[#80c8f8]"
            >
              <div class="mr-2 text-lg">
                <svg-icon :icon-class="menu.icon"></svg-icon>
              </div>

              <div>{{ menu.title }}</div>
            </div>
          </div>
          <div v-if="userInfo" class="text-gray-800 ml-3 cursor-pointer">
            <img
              class="w-[30px] h-[30px] rounded-full"
              :src="userInfo?.avatar"
              :alt="userInfo?.username"
            />
          </div>
        </div>
        <!-- 小屏导航栏 -->
        <div class="flex md:hidden">
          <div
            v-for="menu in mobileMenus"
            :key="menu.title"
            class="group text-gray-800 ml-2 cursor-pointer post-item"
            @click="menuClick(menu)"
          >
            <div class="flex items-center px-1 text-md">
              <div class="mr-2 text-md">
                <svg-icon :icon-class="menu.icon"></svg-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!-- 侧边菜单 -->
    <div class="md:hidden slide" :class="{ show: slideVisible }">
      <div
        class="slide-mask fixed top-0 left-0 right-0 bottom-0 z-30 bg-gray-900 bg-opacity-50 hidden"
        @click="slideVisible = false"
      ></div>
      <div
        class="slide-wrapper duration-300 fixed top-0 bottom-0 right-0 z-30 w-[240px] bg-[#f6f8fa] py-4 overflow-x-hidden overflow-y-auto translate-x-[100%]"
      >
        <user-info></user-info>
        <div class="my-5 border-t border-[#a4d8fa] border-dashed"></div>
        <div class="px-3">
          <div
            v-for="menu in mobileslideMenus"
            :key="menu.title"
            class="group text-gray-700 ml-3 cursor-pointer post-item py-2"
            @click="menuClick(menu)"
          >
            <div class="flex items-center px-1 text-md">
              <div class="mr-4 text-lg">
                <svg-icon :icon-class="menu.icon"></svg-icon>
              </div>

              <div>{{ menu.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: {
        opacity: true,
        hidden: false,
      },
      // 侧边栏是否显示
      slideVisible: false,
    }
  },

  computed: {
    menus() {
      return [
        {
          title: this.$t('nav.search'),
          icon: 'search',
        },
        {
          title: this.$t('nav.home'),
          link: '/',
          icon: 'home',
        },
        {
          title: this.$t('nav.tags'),
          icon: 'biaoqian',
          link: '/tags',
        },
        {
          title: this.$t('nav.about'),
          icon: 'xin',
        },
        {
          title: this.$t('nav.link'),
          icon: 'lianjie',
        },

        {
          title: '菜单',
          icon: 'menu',
        },
      ]
    },
    pcMenus() {
      return this.menus.filter((one) => !['menu'].includes(one.icon))
    },
    mobileMenus() {
      return this.menus.filter((one) => ['search', 'menu'].includes(one.icon))
    },
    mobileslideMenus() {
      return this.menus.filter((one) => !['search', 'menu'].includes(one.icon))
    },
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  watch: {
    slideVisible: {
      handler(val) {
        const html = document.documentElement
        const body = html.querySelector('body')
        if (val) {
          const initVal = window.getComputedStyle(body).overflow
          body.dataset.overflow = initVal
        }

        if (val) {
          body.style.overflow = 'hidden'
        } else {
          body.style.overflow = body.dataset.overflow || 'initial'
        }
      },
    },
  },
  mounted() {
    this.pageScroll()
  },
  methods: {
    pageScroll() {
      let prevScrollTop = 0
      const scrollHaldler = () => {
        const html = document.documentElement
        const { scrollTop } = html
        if (scrollTop > prevScrollTop) {
          this.nav.hidden = true
        } else {
          this.nav.hidden = false
        }
        if (scrollTop > 50) {
          this.nav.opacity = false
        } else {
          this.nav.opacity = true
        }
        prevScrollTop = scrollTop
      }
      window.addEventListener('scroll', scrollHaldler)
      this.$on('hook:beforeDestory', () => {
        window.removeEventListener('scroll', scrollHaldler)
      })
    },
    menuClick(menu) {
      this.slideVisible = false
      if (menu.link) {
        this.$router.push(this.localeLocation({ path: menu.link }))
        // this.$router.push(menu.link)
        return false
      }
      if (menu.title === '菜单') {
        this.slideVisible = !this.slideVisible
      }
    },
  },
}
</script>

<style lang="scss" scoped>
nav {
  box-shadow: rgba(0, 0, 0, 0.075) 5.6px 5.6px 11.2px 0;
  background-color: rgba(255, 255, 255, 0.8);
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
  &.opacity {
    background-color: transparent;
    box-shadow: none;
    .post-item,
    .post-title {
      color: #fff;
    }
  }
  &.hid {
    transform: translateY(-100%);
  }
}
.slide {
  &.show {
    display: block;
    .slide-mask {
      display: block;
    }
    .slide-wrapper {
      transform: translateX(0);
    }
  }
}
</style>
